<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili---ganbei!!!</title>
    <link rel="stylesheet" href="less/index.css">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入字体图标文件 -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 头部 -->
    <header class="suspension-box">
        <div class="m-navbar">
            <a href="#" class="logo">
                <i class="iconfont Navbar_logo"></i>
            </a>
            <div class="right">
                <a href="#" class="search">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="user">
                    <img src="./images/a553a450cc750128f611937a69d4284b3019cb9b.jpg@48w_48h_1c.webp" alt="">
                </a>
                <div class="app_btn">
                    <img src="./images/download.png" alt="">
                </div>
            </div>
        </div>
        <div class="chanel-menu">
            <div class="tabs">
                <div class="tab_list">
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <a href="#">首页</a>
                    <div class="line"></div>
                </div>
            </div>
            <div class="after">
                <i class="iconfont general_pulldown_s"></i>
            </div>
        </div>
    </header>
    <!-- 主体 -->
     <div class="home">
        <div class="video_list">
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/dog.jpg@480w_270h_1c" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊
                大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/8a8995647f2c922a0dfcd5ba3a30b48ccbc3a526.jpg@960w_540h_1c.webp" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/dog.jpg@480w_270h_1c" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/8a8995647f2c922a0dfcd5ba3a30b48ccbc3a526.jpg@960w_540h_1c.webp" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/dog.jpg@480w_270h_1c" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/8a8995647f2c922a0dfcd5ba3a30b48ccbc3a526.jpg@960w_540h_1c.webp" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/dog.jpg@480w_270h_1c" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/8a8995647f2c922a0dfcd5ba3a30b48ccbc3a526.jpg@960w_540h_1c.webp" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
            <a href="#" class="video_item">
                <div class="card">
                    <img src="./images/dog.jpg@480w_270h_1c" alt="">
                    <div class="cont">
                        <span><i class="iconfont icon_shipin_bofangshu" data-v-36c8e85c=""></i>100万</span>
                        <span><i class="iconfont icon_shipin_danmushu" data-v-36c8e85c=""></i>999</span>
                    </div>
                </div>
                <p class="ellipsis-2">大家法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊大家
                    法律的积分卡洛杉矶发拉进来的开发发的垃圾堆覅哦啊</p>
            </a>
        </div>
     </div>
     <!-- 底部 -->
      <!-- <div class="end">
        <div class="ending">
            <i class="iconfont Navbar_logo"></i>
            打开App，看你感兴趣的视频
        </div>
      </div> -->
      <div class="end">
        <i class="iconfont Navbar_logo"></i>
        打开App，看你感兴趣的视频
      </div>
</body>
</html>